<template>
	<view>
		<view class="">
			<!-- 头部信息 -->
			<view class="_abbr">
				<view>
					<u-icon name="map"></u-icon>
				</view>
				<view>
					<image class="img" src="/static/img/logo.png"></image>
				</view>
				<view>
					<u-search shape="round" searchIconSize="10" :show-action="false"></u-search>
				</view>
				<view>
					<u-icon name="car"></u-icon>
				</view>
			</view>
		</view>
		<!-- 标题列表 -->
		<view class="">
			<u-tabs :list="list1" @click="getcatee"></u-tabs>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<u-swiper indicator :list="banner" interval='1000' circular></u-swiper>
		</view>
		<!-- 宫格布局 -->
		<view class="abcd">
			<view class="wangge" v-for="item in baseList" :key="item.id">
				<image class="image" :src="item.img"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<view class="quan">
			<!-- 左侧定时器 -->
			<view class="dings">
				<view class="ding">
					<image class="imaa" src="/static/img/图1.png"></image>
					<view>
						<view class="xian1">
							限时抢购
						</view>
						<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
							@change="onChange">
							<view class="time">
								<view class="time__custom">
									<text
										 class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
						<text class="xian3">查看更多</text>
					</view>
				</view>
			</view>
			<!-- 右侧 -->
			<view class="right">
				<view class="right1">
					<image class="im" src="/static/img/图2.png" mode=""></image>
					<view class="rightt">
						<span>品质上新</span>
						<span>9点整，抢大牌</span>
						<span>疯抢红包</span>
					</view>
				</view>
				<view class="right2">
					<image class="imm" src="/static/img/图3.png" mode=""></image>
					<view class="rightt">
						<span>日常好物</span>
						<span>愿君多采撷</span>
						<span>塞满奖券</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="">
			<u-subsection activeColor="#f56c6c" @change="changeType" mode='subsection' :list="goodsInfo"
				:current="current"></u-subsection>
		</view>
		<view v-if="current==0">
			<view class="abcc" v-for="item in goodslist" :key="item.id" @click="detail(item.id)">
				<view class="">
					<image class="imgg" :src="abc+item.img" mode=""></image>
				</view>
				<view class="price">
					<view>{{item.goodsname}}</view>
					<view>商品价格:{{item.price}}</view>
					<view>打折价格:<span class='pricee'>{{item.market_price}}</span></view>
					<view class="cha">
						查看商品
					</view>
				</view>
			</view>
		</view>
		<view v-if="current==1">
			<view class="abcc" v-for="item in goodslist1" :key="item.id" @click="detail(item.id)">
				<view class="">
					<image class="imgg" :src="abc+item.img" mode=""></image>
				</view>
				<view class="price">
					<view>商品详情:{{item.goodsname}}</view>
					<view>商品价格:{{item.price}}</view>
					<view>打折价格:<span class='pricee'>{{item.market_price}}</span></view>
					<view class="cha">
						查看商品
					</view>
				</view>
			</view>
		</view>
		<view v-if="current==2">
			<view class="abcc" v-for="item in goodslist2" :key="item.id" @click="detail(item.id)">
				<view class="">
					<image class="imgg" :src="abc+item.img" mode=""></image>
				</view>
				<view class="price">
					<view>{{item.goodsname}}</view>
					<view>商品价格:{{item.price}}</view>
					<view>打折价格:<span class='pricee'>{{item.market_price}}</span></view>
					<view class="cha">
						查看商品
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBanner,
		getCate,
		getHortgoods
	} from '@/request/app.js'
	export default {
		data() {
			return {
				list1: [],
				banner: [],
				baseList: [{
						id: 1,
						img: require('../../static/img/限时抢购.png'),
						title: '限时抢购'
					},
					{
						id: 2,
						img: require('../../static/img/畅销商品.png'),
						title: '畅销商品'
					},
					{
						id: 3,
						img: require('../../static/img/品质大牌.png'),
						title: '品质保证'
					},
					{
						id: 4,
						img: require('../../static/img/小u自营.png'),
						title: '小U自营'
					},
					{
						id: 5,
						img:require('../../static/img/积分兑换.png'),
						title: '积分商城'
					},

				],
				goodsInfo: ['热门推荐', '上新推荐', '所有商品'],
				current: 0,
				goodslist: [],
				goodslist1: [],
				goodslist2: [],
				abc: this.$imgUrl,
				timeData: {},
			}
		},
		onLoad() {
			// console.log("21211");
			getBanner()
				.then(res => {
					// console.log(res, "轮播图");
					if (res.data.code == 200) {
						this.banner = res.data.list.map(item => this.$imgUrl + item.img)
					}
					// console.log(this.banner, "轮播图");
				})
			this.getHomecate(),
				// 商品列表
				getHortgoods()
				.then(res => {
					// console.log(res,"商品列表");
					if (res.data.code == 200) {
						this.goodslist = res.data.list[0].content
						this.goodslist1 = res.data.list[1].content
						this.goodslist2 = res.data.list[2].content
					}
					console.log(this.goodslist, "列表");
					console.log(this.goodslist1, "列表");
					console.log(this.goodslist2, "列表");
				})
		},
		methods: {
			// 获取一级分类信息(首页快速分类导航)
			async getHomecate() {
				let result = await getCate()
				// console.log(result,"结果");
				if (result.data.code == 200) {
					this.list1 = result.data.list.map(item => {
						return {
							name: item.catename
						}
					})
					// console.log(this.list1,"分类");
				}
			},
			// 跳转分类信息
			getcatee() {
				uni.navigateTo({
					url: '../list/list'
				})
			},
			// 商品列表
			changeType(e) {
				this.current = e
			},
			// 跳转详情
			detail(id) {
				uni.navigateTo({
					url: '../detail/detail?id='+id
				})
			},
			// 倒计时
			onChange(e) {
				this.timeData = e
			}
		}


	}
</script>

<style lang="scss">
	.right1 {
		position: relative;
	}

	.right2 {
		position: relative;
	}

	.rightt {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 10px;
		left: 5px;
	}

	.rightt span:nth-child(1) {
		color: #FF6347;
		font-weight: bold;
	}

	.rightt span:nth-child(2) {
		color: #FF6347;
		font-weight: bold;
	}

	.rightt span:nth-child(3) {
		width: 80px;
		height: 30px;
		background-color: #FF6347;
		color: white;
		font-weight: bold;
		text-align: center;
		line-height: 30px;
		border-radius: 10px;
	}

	.quan {
		display: flex;
		justify-content: space-between;
	}

	.right {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.im {
		width: 100%;
		height: 100px;
	}

	.imm {
		width: 100%;
		height: 80px;
	}

	.dings {
		width: 50%;
	}

	.ding {
		width: 100%;
		position: relative;
	}

	.xian1 {
		position: absolute;
		top: 20px;
		left: 10px;
		color: green;
		font-weight: bold;
	}

	.xian3 {
		position: absolute;
		top: 30px;
		right: 10px;
		color: green;
	}

	.imaa {
		width: 100%;
		height: 200px;
	}

	.time {
		@include flex;
		align-items: center;
		position: absolute;
		top: 40px;
		left: 5px;

		&__custom {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: $u-primary;
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.cha {
		width: 100px;
		height: 20px;
		border-radius: 10px;
		background-color: orange;
		color: white;
		text-align: center;
		line-height: 20px;
	}

	._abbr {
		height: 40px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FF6347;
	}

	.image {
		width: 50px;
		height: 50px;
	}

	.img {
		width: 100px;
		height: 25px;
	}

	.abcd {
		display: flex;
		justify-content: space-between;
	}

	.imgg {
		width: 100px;
		height: 100px;
	}

	.abcc {
		width: 90%;
		display: flex;
		justify-content: space-around;
		// border: 1px solid red;
		border-radius: 10px;
		box-shadow: 10px 10px 10px #eee;
		margin: 10px auto;
	}

	.price {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.pricee{
		text-decoration:line-through;
	}
</style>
